<template>
  <div>
      <Page
        show-total
        show-sizer
        show-elevator
        :total="total"
        :page-size-opts="opts"
        :page-size="query.pageSize"
        @on-change="Dopage"
        @on-page-size-change="Dosize"/>
  </div>
</template>
<script>
export default {
  name: 'hig-pager',
  model: {
    prop: 'queryValue',
    event: 'queryChangeEvent'
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    opts: {
      type: Array,
      default: ()=> {
        return [10,15,50,100,150,200,300]
      }
    },
    queryValue: {
      type: Object,
      default: {
        pageIndex: 1,
        pageSize: 15
      }
    },
    init: Function
  },
  data() {
    return {
        query: this.queryValue
    }
  },
  methods: {
    Dopage(index) {
      this.query.pageIndex = index
      this.$emit('queryChangeEvent', this.query)
      this.init()
    },
    Dosize(size) {
      this.query.pageSize = size
      this.$emit('queryChangeEvent', this.query)
      this.init()
    }
  }
}
</script>
<style scoped>

</style>